<template  #header>
  <el-tabs type="border-card" v-model="activeName" :before-leave="changeTab">
    <el-tab-pane label="订单信息" name="orderManage">
      <template>
        <div class="card-header">
          <span>订单-核单</span>
        </div>
      </template>
      <el-row :gutter="10">
         <el-input placeholder="搜索编号或客户名称" style="width: 180px;margin-right:10px;"    v-model="searchContent" ></el-input> 
       
          <el-button size="small" type="primary" @click="handlerSearch">搜索</el-button>
        
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        row-key="id"
        @row-dblclick="showOrderDetail"
        @current-change="currentRowSelect"
       
      >
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="customerName" label="客户名称" />
      
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <el-tag v-if="scope.row.orderStatus == 0">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.orderStatus == 1">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="success" v-else-if="scope.row.orderStatus == 2">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="danger" v-else>{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" > <template #default="scope">{{orderTypeList[scope.row.orderType].label}}</template></el-table-column>
         <el-table-column prop="businessName" label="业务员" />
          <el-table-column prop="orderDate" label="下单日期" />
        <el-table-column prop="reviewerName" label="审核人" width="150">
            <template #default="scope">
              {{scope.row.reviewerName}}<el-button v-if="scope.row.orderStatus == 0" @click="submitOrder(scope.row)" size="mini" style="margin-left:10px;" type="primary">提交</el-button>
            </template>
          </el-table-column>
        <el-table-column prop="orderVerify" label="审核日期" />
        <el-table-column prop="deposit" label="定金" />
        <!-- <el-table-column prop="depositer" label="定金收款人" /> -->
         <el-table-column prop="sumPrice" label="税价合计" />
            <!-- <el-table-column prop="deliveryType" label="发货方式" />
        <el-table-column prop="logistics" label="物流/快递编号" />
         <el-table-column prop="installer" label="安装人员" /> -->
        <el-table-column prop="createDate" label="创建时间" /> 
        <el-table-column label="操作" width="105"  >
          <template #default="scope" >
             <el-button
              size="mini"
               v-if="scope.row.orderStatus == 2"
              @click="showCheckDialog(scope.$index, scope.row)"
              type="primary" >财务核单</el-button> 

               <el-button
              size="mini"
               v-if="scope.row.orderStatus == 7"
              @click="showBalanceDialog(scope.$index, scope.row)"
              type="primary" >收尾款</el-button> 

           </template>
           </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 10px"
        :currentPage="currentPage"
        :page-size="10"
        :page-sizes="[10, 20, 100, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
  
      <CheckOrder :checkOrderId="id" v-if="checkOrderVisible === true" :checkOrderVisible="checkOrderVisible"
       @OnCloseCheckDialog="closeCheckDialog"></CheckOrder> 
       <CheckOrderBalance :checkOrderId="id" v-if="balanceOrderVisible === true"
        :balanceOrderVisible="balanceOrderVisible" @OnCloseBlanceDialog="closeBalanceDialog"></CheckOrderBalance> 
    </el-tab-pane>

    <el-tab-pane label="订单细项" name="orderDetailManage">
     
     
       <el-table :data="orderDetailData"  highlight-current-row
        row-key="id" style="width: 100%">
        <el-table-column prop="product.name" label="订购商品" />
        <el-table-column prop="product.code" label="订购商品" />
        <el-table-column prop="product.unitName" label="订购商品" />
         <el-table-column prop="orderCount" label="订购数量" />
         <el-table-column prop="actualCount" label="出货数量" />
        <el-table-column prop="price" label="单价" />
         <el-table-column prop="amountPrice" label="金额" />
         <el-table-column prop="shipper" label="出货人" />
         <el-table-column prop="shipperTime" label="出货时间" />
        
      </el-table>  
     
    </el-tab-pane>
 

  </el-tabs>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
 
import {
 
  useHandleSizeChange,
  useHandleCurrentChange,
  useHandlerSearch,
  loadData,
  getRequest,
  
} from "../../utils/api";
import { ElMessage  } from "element-plus";
import CheckOrder from "../../components/ord/CheckOrder.vue";
import CheckOrderBalance from "../../components/ord/CheckOrderBalance.vue";
export default {
  name: "OrderListCheck",
  components: {
    CheckOrder,CheckOrderBalance
},

  setup(props, { emit }) {
    const baseUrl = "/order/basic/checkOrderList";
    const state = reactive({
      checkOrderVisible:false ,
      balanceOrderVisible:false ,
      orderStatusList: [
        {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        {value: 4,label: "制单"},
        {value: 5,label: "已发货"},
        {value: 6,label: "安装调试完毕"},
        {value:7,label: "待收尾款"},
         {value:8,label: "订单完成"}
        
      ],orderTypeList:[ {value: 0,label: "直销"},
        {value: 1,label: "维修"},
        {value: 2,label: "调换"},
         {value: 3,label: "补发"}],
      
      searchContent: "",
      tableData: [],
      
      orderDetailData: [],
    
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      orderName: "",
      activeName: "orderManage",
      orderInfo:{
          customerInfo:{name:'',phone:"",address:''},
          orderType:0
      },
      orderType:computed(()=>{
        let {label} = state.orderTypeList[state.orderInfo.orderType];
          return label;
        })
    });

    const showOrderDetail = (row, column, event) => {
      state.activeName = "orderDetailManage";
      state.id = row.id;
      state.orderInfo = row ;
      
    };
  //加载订单细项数据
    const loadOrderDetailData = () => {
      getRequest("/order/basic/detail/", { id: state.id }).then(
        (response) => {
          if (response) {
            state.orderDetailData = response.data;
          }
        }
      );
    };
 

    const currentChange = (pageNo) => {
      state.currentPage = pageNo;
      loadData(state, state.baseUrl);
      state.orderDetailData=[];
      state.id='';
    };
 


    const currentRowSelect = (currentRow, oldCurrentRow) => {
        state.id = currentRow.id;
        state.orderInfo = currentRow ;
    };

 
 
    const changeTab = (activeName, oldActiveName) => {
      return new Promise((resolve, reject) => {
        if (activeName == "orderDetailManage") {
          if (state.id) {
            loadOrderDetailData();
            return resolve();
          } else {
            ElMessage.error("请选中某一行订单信息！");
            return reject();
          }
        }
        else{
            return resolve();
        }
       
      });
    };
 
 
    
       const closeBalanceDialog = (data)=>{
          state.balanceOrderVisible = false ;
      
          if(data){
          
            loadData(state, state.baseUrl);
            state.orderDetailData=[];
            state.id='';
          }
        }

    const closeCheckDialog = (data)=>{
      state.checkOrderVisible = false ;
      
      if(data){
       
        loadData(state, state.baseUrl);
         state.orderDetailData=[];
         state.id='';
      }
    }

    const showCheckDialog = (index ,row)=>{
       state.checkOrderVisible = true ;
       state.id = row.id ;
     
    }

        const showBalanceDialog = (index ,row)=>{
       state.balanceOrderVisible = true ;
       state.id = row.id ;
     
    }

    onMounted(() => {
     loadData(state, state.baseUrl);
    });
    return {
      closeCheckDialog,
      showCheckDialog,closeBalanceDialog,
      showBalanceDialog,
       
      ...toRefs(state), //解构响应式数据
      ...useHandlerSearch(state, baseUrl),
      ...useHandleSizeChange(state, baseUrl),
      ...useHandleCurrentChange(state, baseUrl),
      currentChange,
      currentRowSelect,
      changeTab,
      showOrderDetail
      //,printOrder,
     //printOrderPreview
  
      
    };
  },
};
</script>
<style scoped>

table.dataintable {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}

table.dataintable th {
  vertical-align:baseline;
  padding:5px 0px;
 
  border:1px solid #3F3F3F;
  text-align:center;
  color:#3F3F3F;
}

table.dataintable td {
  vertical-align:text-top;
  padding:5px 0px;
   text-align:center;
  border:1px solid #aaa;
}

table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
  background-color:#fff;
}


 
</style>